<template>
  <view class="network-stats">
    <view class="stats-grid">
      <view class="stat-item">
        <text class="stat-label">信号强度</text>
        <view class="progress-bar">
          <view class="progress-fill" :style="{ width: safeStats.signalStrength + '%', backgroundColor: getSignalColor(safeStats.signalStrength) }"></view>
        </view>
        <text class="stat-value">{{ safeStats.signalStrength }}%</text>
      </view>
      
      <view class="stat-item">
        <text class="stat-label">网络速度</text>
        <view class="progress-bar">
          <view class="progress-fill" :style="{ width: getSpeedPercentage(safeStats.networkSpeed) + '%', backgroundColor: getSpeedColor(safeStats.networkSpeed) }"></view>
        </view>
        <text class="stat-value">{{ safeStats.networkSpeed }} Mbps</text>
      </view>
      
      <view class="stat-item">
        <text class="stat-label">丢包率</text>
        <view class="progress-bar">
          <view class="progress-fill" :style="{ width: safeStats.packetLoss + '%', backgroundColor: getPacketLossColor(safeStats.packetLoss) }"></view>
        </view>
        <text class="stat-value">{{ safeStats.packetLoss }}%</text>
      </view>
      
      <view class="stat-item">
        <text class="stat-label">延迟</text>
        <view class="progress-bar">
          <view class="progress-fill" :style="{ width: getLatencyPercentage(safeStats.latency) + '%', backgroundColor: getLatencyColor(safeStats.latency) }"></view>
        </view>
        <text class="stat-value">{{ safeStats.latency }} ms</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue';

// 定义props
const props = defineProps({
  stats: {
    type: Object,
    default: () => ({
      signalStrength: 0,
      networkSpeed: 0,
      packetLoss: 0,
      latency: 0
    })
  }
});

// 确保stats对象包含所有必要的属性
const safeStats = computed(() => {
  return {
    signalStrength: props.stats.signalStrength !== undefined ? props.stats.signalStrength : 0,
    networkSpeed: props.stats.networkSpeed !== undefined ? props.stats.networkSpeed : 0,
    packetLoss: props.stats.packetLoss !== undefined ? props.stats.packetLoss : 0,
    latency: props.stats.latency !== undefined ? props.stats.latency : 0
  };
});

// 信号强度颜色
const getSignalColor = (value) => {
  if (value >= 70) return '#00ff00';
  if (value >= 40) return '#ffff00';
  return '#ff0000';
};

// 网络速度百分比和颜色
const getSpeedPercentage = (value) => {
  return Math.min(value / 100 * 100, 100); // 假设100Mbps是满值
};

const getSpeedColor = (value) => {
  if (value >= 50) return '#00ff00';
  if (value >= 20) return '#ffff00';
  return '#ff0000';
};

// 丢包率颜色
const getPacketLossColor = (value) => {
  if (value <= 2) return '#00ff00';
  if (value <= 5) return '#ffff00';
  return '#ff0000';
};

// 延迟百分比和颜色
const getLatencyPercentage = (value) => {
  return Math.min(value / 200 * 100, 100); // 假设200ms是满值
};

const getLatencyColor = (value) => {
  if (value <= 30) return '#00ff00';
  if (value <= 80) return '#ffff00';
  return '#ff0000';
};
</script>

<style>
.network-stats {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 15px;
  box-sizing: border-box;
}

.stats-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-label {
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 5px;
}

.progress-bar {
  height: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 5px;
}

.progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease, background-color 0.5s ease;
}

.stat-value {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  align-self: flex-end;
}
</style>